<script setup lang="ts">
// 在子组件使用 defineProps进行接收 接收一个数组 里面存放我们 定义在父组件中子组件的属性
// 我们推荐这样来接收参数 毕竟可以规范类型
/*import { ref, watch } from 'vue'
// 子组件接收父组件的数据
const props = defineProps<{
  toSon: string
  toSon2: string,
  id: number,
  msg: string
}>()
// 多个属性使用逗号分隔 分别存放不同的父组件中子组件中的属性
console.log(props.toSon)
console.log(props.toSon2)
// 我们尝试接收一下对象
console.log(props.id, 'post对象中的id属性')
console.log(props.msg, 'post对象中的msg属性')

// 试想一下 我们从父组件获取到的值可以修改吗？
// props.id++ // 我们发现普通的写法没有办法修改

// 但是可以使用 watch监听属性 来修改
const ids = ref()
watch(() => props.id, () => {
  ids.value = props.id
}, { deep: true, immediate: true })

function changeIds() {
  ids.value++
}*/

// 使用更简单的方法 实现修改传递过来的值
// let model = defineModel()
//
// function update() {
//   model.value++
// }

// 通过父组件传递的值 来控制子组件的元素的显示与隐藏
/*let Flag = defineModel()
function cancel() {
  Flag.value = false
}*/


// 子组件向父组件传递数据 普通的写法
// 1.在子组件中使用 defineEmits 来接收 里面是一个数组 这里存放的是在父组件中的子组件监听的事件的名称 @后面的那个
// 我在父组件中的子组件监听的是 change 所以我这里写change
// let Emit = defineEmits(['change'])
// 2.通过我们定义的变量 来调用 并且传递数据 第一个参数 依然是我们监听的属性 第二个参数就是我们要向父组件传递的数据
// Emit('change', 103) // 这是传递基本数据类型
// 我们传递一个对象
// Emit('change', { id: 103 }) // 结果是一样的 只不过 传递对象的时候 需要父组件使用点衣语法来获取属性值


// 我们将子传父 写成对象的形式 如果我们写成对象的形式 则需要使用函数的形式
interface idsType {
  id: number
}

let emit = defineEmits<{
  // e 表示我们在父组件中的子组件监听的事件
  // id 表示我们要传给父组件的类型
  // :void 表示返回值的类型是 空
  // 这是我们传递基本数据类型的写法
  // (e: 'change', id: number): void

  // 当我们传递的是对象类型
  // 我们需要在外部定义一个接口 来声明我们传递数据的类型
  // e 表示我们监听 父组件中 子组件的事件
  // id表示我们的参数名  :idsType 表示类型 我们在外部定义好了这个类型 定义的是我们要传递数据的类型是数字类型
  // :void表示返回值是 空
  (e: 'change', id: idsType): void
}>()
// 传递基本数据类型
// emit('change', 103)

// 我们尝试传递 对象的形式
// emit('change', { id: 103 })

// 我们尝试写在事件当中
function toFather() {
  emit('change', { id: 103 })
}
</script>

<template>
  <h1>这是子组件</h1>
  <!--  <button @click="changeIds">修改ids</button>-->
  <!--  修改后的id的值&#45;&#45;{{ ids }}-->


  <!--  <button @click="update">更新model的值</button>-->
  <!--  <div>{{ model }}</div>-->


  <!--  点击按钮 通过获取父组件的值 来隐藏子组件的元素 -->
  <!--  <button @click="cancel">取消</button>-->
  <!--  <div v-if="Flag">弹框</div>-->


  <p>子传父都在js代码当中</p>
  <p>我们尝试卸载事件当中</p>
  <button @click="toFather">向父组件传递数据</button>


</template>

<style scoped>

</style>
